@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  src: local('Nunito-Light'), url(../extends/font/1TiHc9yag0wq3lDO9cw0vj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito-Regular'), url(../extends/font/0rdItLTcOd8TSMl72RUU5w.woff) format('woff');
}

body, divForm, input, button, h1,select {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/******************************************************
 * =Body
 *****************************************************/

body {
  padding: 60px;
  background: #2b2b2b;
  font-family: Nunito, sans-serif;
  font-size: 100%;
}

#divForm {
  color: #fff;
  width: 25%;
}

#result{
    color:#fff;
    font-weight:bold;
    font-size: 10px;
}
/**
 * Title
 */

h1 {
  font: normal 1.6em/1.6em Nunito, sans-serif;
  color: #fff;
  text-align: center;
  margin: 10px 0 23px;
}

/**
 * Inputs and button
 */

input, button, select {
  width: 95%;
  border: none;
  padding: 16px;
  font-size: 1.1em;
  border-radius: 0px;
  -webkit-transition: background-color 80ms ease-out;
  -moz-transition: background-color 80ms ease-out;
  -o-transition: background-color 80ms ease-out;
  -ms-transition: background-color 80ms ease-out;
  transition: background-color 80ms ease-out;
}

/**
 * Inputs
 */

input, select{
  margin-bottom: 22px;
  background: #eee;
  padding-left: 56px;
}

input[type=text] {
  background-image: url(http://miloluca.github.io/playground/001_User-Login/icons/user.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 16px center;
}

input[type=password] {
  background-image: url(http://miloluca.github.io/playground/001_User-Login/icons/lock.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 16px center;
}

input,select:hover {
  background-color: rgb(244, 244, 244);
}

input:focus {
  border-left: 3px solid #ee7147;
  outline: none;
  background-color: #fff;
}
select:focus{
  border-left: 3px solid #ee7147;
  outline: none;
  background-color: #fff;
}

/**
 * Button
 */

button {
  background-color: #710909;
  color: #fff;
  cursor: pointer;
  
}

button:hover, button:focus {
  background-color: #500;
 /* outline: none;*/
}

button:active  {
  background-color: #931919;
  
  opacity: .7;
}
